// 当前单词索引
let currentWordIndex = 0;
// 单词列表
let words = [];

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', (event) => {
    loadWords(); // 加载已保存的单词
    
    // 为添加按钮添加点击事件监听器
    const addWordBtn = document.getElementById('addWordBtn');
    addWordBtn.addEventListener('click', addWord);
    
    // 为输入框添加回车键事件监听器
    const englishInput = document.getElementById('englishInput');
    const chineseInput = document.getElementById('chineseInput');
    
    englishInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            chineseInput.focus(); // 英文输入后按回车跳转到中文输入框
        }
    });
    
    chineseInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            addWord(); // 中文输入后按回车添加单词
        }
    });
    
    // 为轮播控制按钮添加事件监听器
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const showChineseBtn = document.getElementById('showChineseBtn');
    
    prevBtn.addEventListener('click', showPrevWord);
    nextBtn.addEventListener('click', showNextWord);
    showChineseBtn.addEventListener('click', toggleChineseMeaning);
    
    // 为CSV导入导出按钮添加事件监听器
    const exportCsvBtn = document.getElementById('exportCsvBtn');
    const importCsvBtn = document.getElementById('importCsvBtn');
    const csvFileInput = document.getElementById('csvFileInput');
    
    exportCsvBtn.addEventListener('click', exportWordsToCsv);
    importCsvBtn.addEventListener('click', () => csvFileInput.click());
    csvFileInput.addEventListener('change', importWordsFromCsv);
});

// 添加单词函数
function addWord() {
    const englishInput = document.getElementById('englishInput'); // 获取英文输入框元素
    const chineseInput = document.getElementById('chineseInput'); // 获取中文输入框元素
    const english = englishInput.value.trim(); // 获取输入的英文单词并去除首尾空格
    const chinese = chineseInput.value.trim(); // 获取输入的中文释义并去除首尾空格
    
    // 检查两个输入框是否都有内容
    if (english && chinese) { 
        saveWord(english, chinese); // 保存单词
        englishInput.value = ''; // 清空英文输入框
        chineseInput.value = ''; // 清空中文输入框
        englishInput.focus(); // 聚焦到英文输入框
    } else {
        alert('请同时输入英文单词和中文释义！');
    }
}

// 保存单词函数
function saveWord(english, chinese) {
    chrome.storage.local.get(['words'], function(result) {
        let words = result.words || []; // 从存储获取单词列表，如果为空则初始化为空数组
        
        // 创建包含英文和中文的对象
        const wordObj = {
            english: english,
            chinese: chinese
        };
        
        words.push(wordObj); // 将新单词对象添加到单词列表
        chrome.storage.local.set({words: words}, function() {
            loadWords(); // 重新加载单词列表
        });
    });
}

// 加载单词函数（页面加载时调用）
function loadWords() {
    chrome.storage.local.get(['words'], function(result) {
        words = result.words || []; // 从存储获取单词列表，如果为空则初始化为空数组
        displayWords(); // 显示单词列表
        updateCarousel(); // 更新轮播显示
    });
}

// 显示单词列表函数
function displayWords() {
    const wordList = document.getElementById('wordList'); // 获取单词列表 ul 元素
    wordList.innerHTML = ''; // 清空单词列表
    
    words.forEach((wordObj, index) => { // 遍历单词列表
        const li = document.createElement('li'); // 创建列表项 li 元素
        
        // 创建包含英文和中文的div
        const wordDiv = document.createElement('div');
        wordDiv.className = 'word-item';
        wordDiv.innerHTML = `<strong>${wordObj.english}</strong> - ${wordObj.chinese}`;
        li.appendChild(wordDiv);

        // 创建删除按钮
        const deleteButton = document.createElement('button'); // 创建删除按钮 button 元素
        deleteButton.textContent = '删除'; // 设置按钮文本内容为 "删除"
        deleteButton.onclick = () => deleteWord(index); // 设置按钮点击事件处理函数，点击时调用 deleteWord 函数删除单词

        li.appendChild(deleteButton); // 将删除按钮添加到列表项
        wordList.appendChild(li); // 将列表项添加到单词列表
    });
}

// 删除单词函数
function deleteWord(index) {
    chrome.storage.local.get(['words'], function(result) {
        let words = result.words || []; // 从存储获取单词列表，如果为空则初始化为空数组
        words.splice(index, 1); // 删除指定索引的单词
        chrome.storage.local.set({words: words}, function() {
            loadWords(); // 重新加载单词
        });
    });
}

// 更新轮播显示
function updateCarousel() {
    const englishDisplay = document.getElementById('englishDisplay');
    const chineseDisplay = document.getElementById('chineseDisplay');
    const progress = document.getElementById('progress');
    const showChineseBtn = document.getElementById('showChineseBtn');
    
    // 重置显示释义按钮
    showChineseBtn.textContent = '显示释义';
    showChineseBtn.dataset.showing = 'false';
    chineseDisplay.style.display = 'none';
    
    if (words.length > 0) {
        // 确保索引在有效范围内
        if (currentWordIndex >= words.length) {
            currentWordIndex = 0;
        } else if (currentWordIndex < 0) {
            currentWordIndex = words.length - 1;
        }
        
        // 显示当前单词
        const currentWord = words[currentWordIndex];
        englishDisplay.textContent = currentWord.english;
        chineseDisplay.textContent = currentWord.chinese;
        
        // 更新进度
        progress.textContent = `${currentWordIndex + 1}/${words.length}`;
    } else {
        // 没有单词时的默认显示
        englishDisplay.textContent = '暂无单词';
        chineseDisplay.textContent = '';
        progress.textContent = '0/0';
    }
}

// 显示上一个单词
function showPrevWord() {
    if (words.length > 0) {
        currentWordIndex--;
        if (currentWordIndex < 0) {
            currentWordIndex = words.length - 1;
        }
        updateCarousel();
    }
}

// 显示下一个单词
function showNextWord() {
    if (words.length > 0) {
        currentWordIndex++;
        if (currentWordIndex >= words.length) {
            currentWordIndex = 0;
        }
        updateCarousel();
    }
}

// 切换显示/隐藏中文释义
function toggleChineseMeaning() {
    const chineseDisplay = document.getElementById('chineseDisplay');
    const showChineseBtn = document.getElementById('showChineseBtn');
    
    if (showChineseBtn.dataset.showing === 'true') {
        // 当前正在显示，需要隐藏
        chineseDisplay.style.display = 'none';
        showChineseBtn.textContent = '显示释义';
        showChineseBtn.dataset.showing = 'false';
    } else {
        // 当前隐藏，需要显示
        chineseDisplay.style.display = 'block';
        showChineseBtn.textContent = '隐藏释义';
        showChineseBtn.dataset.showing = 'true';
    }
}

// 导出单词为CSV格式
function exportWordsToCsv() {
    if (words.length === 0) {
        alert('没有单词可以导出！');
        return;
    }
    
    // 创建CSV内容
    let csvContent = '英文,中文\n'; // CSV头部
    words.forEach(wordObj => {
        // 处理可能包含逗号或引号的文本
        const english = escapeCsvField(wordObj.english);
        const chinese = escapeCsvField(wordObj.chinese);
        csvContent += `${english},${chinese}\n`;
    });
    
    // 创建Blob对象，指定UTF-8编码和BOM
    const BOM = '\uFEFF';
    const blob = new Blob([BOM, csvContent], { 
        type: 'text/csv;charset=utf-8;' 
    });
    
    // 创建下载链接
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    const fileName = `背单词_${new Date().toISOString().slice(0, 10)}.csv`;
    
    link.setAttribute('href', url);
    link.setAttribute('download', fileName);
    link.style.visibility = 'hidden';
    
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    alert(`成功导出 ${words.length} 个单词到CSV文件！`);
}

// 从CSV导入单词
function importWordsFromCsv(event) {
    const file = event.target.files[0];
    if (!file) return;
    
    const reader = new FileReader();
    reader.onload = function(e) {
        try {
            // 获取文件内容
            const csvData = e.target.result;
            
            // 解析CSV数据
            const importedWords = parseCsvData(csvData);
            
            if (importedWords.length === 0) {
                alert('没有找到有效的单词数据！');
                return;
            }
            
            // 确认是否导入
            const confirmMsg = `文件中包含 ${importedWords.length} 个单词。是否要导入这些单词？` +
                              (words.length > 0 ? `\n注意：这将替换当前的 ${words.length} 个单词。` : '');
            
            if (confirm(confirmMsg)) {
                // 保存导入的单词
                chrome.storage.local.set({words: importedWords}, function() {
                    loadWords(); // 重新加载单词
                    alert(`成功导入 ${importedWords.length} 个单词！`);
                });
            }
        } catch (error) {
            alert('文件解析失败：' + error.message);
        }
    };
    
    // 使用UTF-8编码读取文件，并包含BOM
    reader.readAsText(file, 'UTF-8');
    // 清空文件输入框
    event.target.value = '';
}

// 解析CSV数据
function parseCsvData(csvData) {
    const lines = csvData.split('\n');
    
    // 检查是否有数据
    if (lines.length <= 1) {
        return [];
    }
    
    const importedWords = [];
    // 跳过第一行标题
    for (let i = 1; i < lines.length; i++) {
        const line = lines[i].trim();
        if (line) {
            // 解析CSV行
            const fields = parseCsvLine(line);
            if (fields.length >= 2) {
                importedWords.push({
                    english: fields[0].trim(),
                    chinese: fields[1].trim()
                });
            }
        }
    }
    
    return importedWords;
}

// 解析CSV行
function parseCsvLine(line) {
    const result = [];
    let current = '';
    let inQuotes = false;
    
    for (let i = 0; i < line.length; i++) {
        const char = line[i];
        
        if (char === '"') {
            if (inQuotes && i + 1 < line.length && line[i + 1] === '"') {
                // 双引号转义
                current += '"';
                i++; // 跳过下一个引号
            } else {
                // 切换引号状态
                inQuotes = !inQuotes;
            }
        } else if (char === ',' && !inQuotes) {
            // 逗号分隔符
            result.push(current);
            current = '';
        } else {
            current += char;
        }
    }
    
    result.push(current);
    return result;
}

// 转义CSV字段
function escapeCsvField(field) {
    if (field.includes(',') || field.includes('"') || field.includes('\n')) {
        // 如果包含特殊字符，用双引号包围，并转义内部的双引号
        return '"' + field.replace(/"/g, '""') + '"';
    }
    return field;
}